<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            user-select: none;
        }
        
        li {
            list-style: none;
        }
        
        .page {
            overflow: hidden;
            text-align: center;
            line-height: 40px;
        }
        
        .page>* {
            float: left;
        }
        
        .page .prev,
        .page .next {
            padding: 0 10px;
            border: 1px solid gray;
        }
        
        .page .pageBox {
            margin: 0 5px;
            overflow: hidden;
        }
        
        .page .pageBox li {
            float: left;
            width: 40px;
            border: 1px solid gray;
            margin: 0 5px;
        }
        
        .page .pageBox .select {
            background-color: #6ff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap page">
        <!-- <div class="prev">上一页</div>
        <ul class="pageBox">
           
        </ul>
        <div class="next">下一页</div> -->
    </div>

    <div class="div page">
        <!-- <div class="prev">上一页</div>
        <ul class="pageBox">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="next">下一页</div> -->
    </div>
</body>
<script>
    // 1. 数据的总量  100  count
    // 2. 每页显示多少条   5    showNum
    // 3. 显示多少页   5   showPage
    function Page(str, option) {
        this.target = document.querySelector(str)
        this.pageindex = 1
        this.option = {
            count: 100,
            showNum: 5,
            showPage: 5,
            callback: function(a) {
                console.log(a)
            }
        }
        for (var key in option) {
            this.option[key] = option[key];
        }
        this.createEle()
        this.createPage()
    }


    // createEle生成三个框架，把元素绑定 在实例化对象中
    Page.prototype.createEle = function() {
        var classList = Array.from(this.target.classList)
        if (classList.indexOf("page") != -1) {
            this.target.className += " page"
        } else {
            this.target.className = " page"
        }
        this.prev = document.createElement("div")
        this.prev.className = "prev"
        this.prev.innerHTML = "上一页"
            // 上一页绑定事件
        var that = this
        this.prev.onclick = function() {
            that.pageindex--
                that.createPage()
        }
        this.target.appendChild(this.prev)

        this.pagebox = document.createElement("ul")
        this.pagebox.className = "pageBox"
        this.target.appendChild(this.pagebox)

        this.next = document.createElement("div")
        this.next.className = "next"
            // 下一页绑定事件
        this.next.innerHTML = "下一页"
        this.next.onclick = function() {
            that.pageindex++
                that.createPage()
        }
        this.target.appendChild(this.next)
    }


    // 在pagebox中生成函数
    Page.prototype.createPage = function() {
        var start = 1;
        var allPage = Math.ceil(this.option.count / this.option.showNum)
        var end = allPage > this.option.showPage ? this.option.showPage : allPage
        this.pagebox.innerHTML = ""

        // 点击过程中pageindex>start或者<end
        this.pageindex = this.pageindex > 0 ? this.pageindex : 1
        this.pageindex = this.pageindex < allPage ? this.pageindex : allPage

        // 页码大于中间的数时********
        var mid = Math.floor(this.option.showPage / 2)
        if (this.pageindex > mid + 1) {
            start = this.pageindex - mid
            if (this.option.showPage % 2 == 0) {
                end = this.pageindex + mid - 1
            } else {
                end = this.pageindex + mid
            }
        }

        // end的临界值   end=end>allPage?allPage:end
        if (end > allPage) {
            end = allPage
            start = allPage - this.option.showPage + 1
        }
        // start的临界值
        start = start > 0 ? start : 1

        // 生成li列表
        for (let i = start; i <= end; i++) {
            var li = document.createElement("li")
            if (i == this.pageindex) {
                li.className = "select"
            }
            var that = this
            li.onclick = function() {
                that.pageindex = i
                that.createPage()
            }
            li.innerHTML = i
            this.pagebox.appendChild(li)
        }
        if (this.option.callback) {
            this.option.callback(this.pageindex)
        }
    }

    // 验证
    new Page(".wrap", {
        count: 100,
        showNum: 5,
        showPage: 8,
        callback: function(pageindex) {
            console.log(pageindex)
        }
    })
    
    new Page(".div", {
        count: 100,
        showNum: 5,
        showPage: 5,
        callback: function(pageindex) {
            console.log(pageindex)
        }
    })
</script>

</html>